<template>
  <view class="noWork" v-if="isshow">
    <view class="noWork-k">
      <image src="@/static/index/noWork.png" mode="scaleToFill" />
      <view class="noWork-title">网络不太顺畅</view>
      <view class="noWork-des">请检查网络连接</view>
      <view class="noWork-btn"><text @click="reload">刷新</text> </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, toRefs, ref, watch } from "vue";
import { base_URL } from "@/utils/http";
const emit = defineEmits(["disconnected", "connected"]);
const isshow = ref(false);
// #ifdef APP-PLUS

uni.getNetworkType({
  success: function (res) {
    if (res.networkType == "none") {
      isshow.value = true;
    }
  },
});
// #endif

// @disconnected="disconnected"
// 			@connected="connected"
const reload = () => {
  uni.getNetworkType({
    success: function (res) {
      if (res.networkType == "none") {
        isshow.value = true;
        emit("disconnected");
      } else {
        isshow.value = false;

        emit("connected");
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.noWork {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1600;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f8fa;
  .noWork-k {
    text-align: center;
    margin-top: -300rpx;
    image {
      width: 500rpx;
      height: 500rpx;
    }
    .noWork-icon {
      margin: 0 auto;
      display: flex;
      justify-content: center;
    }
    .noWork-title {
      font-size: 32rpx;
    }
    .noWork-des {
      font-size: 28rpx;
      color: #7d7d7d;
      margin-top: 10rpx;
    }
    .noWork-btn {
      margin-top: 50rpx;
      text {
        padding: 15rpx 40rpx;
        background-color: #1679fb;
        color: #ffffff;
        border-radius: 10rpx;
      }
    }
  }
}
</style>
